<template>
  <div class="box">
    <div class="header">
      <div class="headerInner">
        <div class="logo clearFix">
          <router-link class="logoLink" to="/home">唯品会</router-link>
        </div>
        <div class="service"></div>
      </div>
    </div>
    <div class="content">
      <div class="contentInner">
        <div class="contentPanel">
          <form>
            
          
          <div class="contentPanelBody">
            <div class="panelNav">
              <span class="panelNavL">会员注册</span>
              <span class="registered">已注册可<router-link to="/login" class="directLogin">直接登录</router-link>
                </span>
            </div>
            <div class="panelContent">
              <div class="panelForm">

                <div class="panelItem">
                  <div class="input">
                    <span class="iconfont icon-shouji zhanghaotu clearFix"></span>
                    <input 
                    class="zhanghao" 
                    type="text" 
                    placeholder="请输入手机号"
                    v-model="phone"
                    name="phone"
                    v-validate="{ required: true, regex: /^1\d{10}$/ }"
                    >
                    <span class="iconfont icon-guanbi1 qingkongtu"></span>
                  </div>
                  <div class="errorText">
                    手机号不能为空
                  </div>
                </div>
                <div class="toolTip">
                  <span class="iconfont icon-tishi toolTipImg"></span>
                  <span class="toolTipText">请先输入手机号以安全验证</span>
                </div>


                <div class="panelItemT">
                  <div class="input">
                    <span class="iconfont icon-iconfontmima zhanghaotu clearFix"></span>
                    <input 
                    class="zhanghao" 
                    type="text" 
                    placeholder="密码由8-20位字母，数字和符号组合"
                    v-model="password"
                    name="password"
                    v-validate="{ required: true, regex: /^\w{6,18}$/ }"
                    >
                    <span class="iconfont icon-guanbi1 qingkongtu"></span>
                  </div>
                  <div class="errorText">
                    密码不能为空
                  </div>
                </div>
                <div class="panelItemT">
                  <div class="input">
                    <span class="iconfont icon-iconfontmima zhanghaotu clearFix"></span>
                    <input 
                    class="zhanghao" 
                    type="text" 
                    placeholder="请在次输入上面的密码"
                    v-model="password2"
                    name="password2"
                    v-validate="{ required: true, is: password }"
                    >
                    <span class="iconfont icon-guanbi1 qingkongtu"></span>
                  </div>
                  <div class="errorText">
                    请输入确认密码
                  </div>
                </div>
                <div class="agreement">
                  <label for="ISY" class="agreementBox clearFix">
                    <input 
                    class="isYn" 
                    type="checkbox" 
                    id="ISY"
                    v-model="isCheck"
                    name="isCheck"
                    >
                    <p class="boxP">我已阅读并接受以下条款： <a href="###">《唯品会服务条款》</a> <a href="###">《隐私条款》</a><a href="###">《唯品支付用户服务协议》</a></p>
                  </label>
                  <div class="errorTextT">
                    <p>接受服务条款才能注册</p>
                  </div>
                </div>
                <div class="panelBtn">
                  <a class="register" @click="register">立即注册</a>
                </div>
              </div>
           </div>
          </div>



          </form>
        </div>  
      </div>
    </div>
    <div class="footer">
      <div class="footerMain">
        <p class="zhengjian">Copyright 2008-2020 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      phone: "",
      password: "",
      password2: "",
      isCheck: true,
    }
  },
  methods:{
    async register() {
      let { phone, password,} = this;
      const success = await this.$validator.validateAll();
      //完整验证，点击完成注册对上面所有的都验证一遍
      //如果通过返回true
      if (success) {
        try {
          await this.$store.dispatch("userRegister", { phone, password });
          alert("用户注册成功，自动跳转到登录页");
          this.$router.push("/login");
        } catch (error) {
          alert("用户注册失败");
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .clearFix::after{
    content: '';
    display: block;
    clear: both;
  }
  .box{
    width: 100%;
    .header{
      width: 100%;
      .headerInner{
        position: relative;
        z-index: 1;
        margin-right: auto;
        margin-left: auto;
        width: 1000px;
        height: 100px;
        zoom: 1;
        .logo{
          display: inline;
          float: left;
          .logoLink{
            width: 125px;
            height: 100px;
            background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
            background-position: -308px -57px;
            display: inline-block;
            vertical-align: top;
            line-height: 500px;
            overflow: hidden;
          }
        }
        .service{
          background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
          background-position: 0 0;
          width: 304px;
          height: 100px;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
        }
      }
    }
    .content{
      width: 100%;
      height: 650px;
      background-color: #FAA8AC;
      .contentInner{
        width: 1000px;
        height: 650px;
        margin: 0 auto;
        background-image: url(//b.appsimg.com/upload/momin/2020/12/14/15/1607915393371.jpg);
        background-position:-460px 0;
        padding: 50px 20px;
        box-sizing: border-box;
        .contentPanel{
          width: 360px;
          height: 523px;
          background-color: white;
          float: right;
          .contentPanelBody{
            width: 100%;
            height: 322px;
            .panelNav{
              width: 100%;
              height: 50px;
              line-height: 50px;
              text-align: center;
              font-size: 18px;
              font-weight: 700;
              border-bottom: 1px solid #666;
              display: flex;
              .panelNavL{
                width: 50%;
                height: 50px;
                text-decoration: none;
                margin-left: -20px;
              }
              .registered{
                font-size: 14px;
                font-weight: 400;
                margin-left: 60px;
                .directLogin{
                  color: #F10A85;
                }
              }

            }
            .panelContent{
              width: 100%;
              height: 230px;
              .panelForm{
                width: 300px;
                height: 271px;
                margin: 26px auto 0;
                // background-color: pink;
                box-sizing: border-box;
                .panelItem{
                  .input{
                    width: 100%;
                    height: 46px;
                    line-height: 46px;
                    border: 1px solid #F10A85;
                    border-radius: 4px;
                    .zhanghaotu{
                      font-size: 22px;
                      float: left;
                      margin-left: 10px;
                    }
                    .zhanghao{
                      width: 230px;
                      height: 30px;
                      border: none;
                      outline: none;
                      margin:8px 0 0 10px;
                      padding-left: 5px;
                      box-sizing: border-box;
                      font-size: 14px;
                    }
                    .qingkongtu{
                      float: right;
                      font-size: 16px;
                      color: #F10A85;
                      margin-right: 10px;
                    }
                  }
                  .errorText{
                    color: red;
                    font-size: 12px;
                    margin: 5px 0;
                  }
                }
                .panelItemT{
                  .input{
                    width: 100%;
                    height: 46px;
                    line-height: 46px;
                    border: 1px solid #F10A85;
                    border-radius: 4px;
                    margin-top: 15px;
                    .zhanghaotu{
                      font-size: 22px;
                      float: left;
                      margin-left: 10px;
                    }
                    .zhanghao{
                      width: 230px;
                      height: 30px;
                      border: none;
                      outline: none;
                      margin:8px 0 0 10px;
                      padding-left: 5px;
                      box-sizing: border-box;
                      font-size: 14px;
                    }
                    .qingkongtu{
                      float: right;
                      font-size: 16px;
                      color: #F10A85;
                      margin-right: 10px;
                    }
                  }
                  .errorText{
                    color: red;
                    font-size: 12px;
                    margin: 5px 0;
                  }
                }
                .toolTip{
                  width: 100%;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  background-color: #DFF1F8;
                  border-radius: 4px;
                  .toolTipImg{
                    color: #249FDF;
                    font-size: 18px;
                    margin: 0 16px 0 14px;
                  }
                }
                .agreement{
                  width: 100%;
                  .agreementBox{
                    width: 100%;
                    .isYn{
                      width: 17px;
                      height: 17px;
                      float: left;
                      
                    }
                    .boxP{
                      float: right;
                      width: 275px;
                      line-height: 1.5;
                      text-align: justify;
                      >a{
                        color: #1D94DA;
                        &:hover{
                          color: #3CCBFF;
                        }
                      }
                    }

                  }
                  .errorTextT{
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    color: red;

                  }
                }
                .panelBtn{
                  width: 100%;
                  height: 46px;
                  background-color: #F10A85;
                  border-radius: 4px;
                  margin: 8px 0 0 1px;
                  .register{
                    display: block;
                    width: 100%;
                    height: 100%;
                    line-height: 46px;
                    font-size: 18px;
                    color: white;
                    text-align: center;
                    cursor: pointer;
                    }
                }
              }
            }
          }

        }
      }
    }
    .footer{
      width: 100%;
      .footerMain{
        width: 1000px;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        .zhengjian{
          font-size: 12px;
          text-align: center;
        }
      }
    }

  }
</style>
